<template>
  <div class="page-container server">
    <van-nav-bar
      title="服务详情"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />

    <!-- 服务状态 -->
    <div class="status-card">
      <div class="status-info">
        <van-icon name="service-o" size="40" />
        <div class="status-text">
          <h3>待服务</h3>
          <p>请按预约时间前往医院就诊</p>
        </div>
      </div>
    </div>

    <!-- 医院信息 -->
    <div class="info-card">
      <div class="card-title">医院信息</div>
      <div class="hospital-info">
        <div class="info-content">
          <h4>{{ serverInfo.hospitalName }}</h4>
          <p>{{ serverInfo.departmentName }}</p>
          <p class="address">
            <van-icon name="location-o" />
            {{ serverInfo.address }}
          </p>
        </div>
        <div class="info-actions">
          <van-button icon="phone-o" type="primary" size="small" @click="makeCall">电话咨询</van-button>
          <van-button icon="guide-o" type="primary" size="small" plain @click="showMap">查看地图</van-button>
        </div>
      </div>
    </div>

    <!-- 就诊信息 -->
    <div class="info-card">
      <div class="card-title">就诊信息</div>
      <van-cell-group inset :border="false">
        <van-cell title="就诊人" :value="serverInfo.patientName" />
        <van-cell title="就诊日期" :value="serverInfo.visitDate" />
        <van-cell title="就诊时间" :value="serverInfo.visitTime" />
        <van-cell title="联系电话" :value="serverInfo.phone" />
      </van-cell-group>
    </div>

    <!-- 注意事项 -->
    <div class="info-card">
      <div class="card-title">注意事项</div>
      <div class="notice-list">
        <div class="notice-item" v-for="(item, index) in noticeList" :key="index">
          <van-icon name="warning-o" color="#ff976a" />
          <span>{{ item }}</span>
        </div>
      </div>
    </div>

    <!-- 就诊流程 -->
    <div class="info-card">
      <div class="card-title">就诊流程</div>
      <div class="process-list">
        <div class="process-item" v-for="(item, index) in processList" :key="index">
          <div class="process-step">
            <span class="step-number">{{ index + 1 }}</span>
          </div>
          <div class="process-content">
            <h5>{{ item.title }}</h5>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

// 服务信息
const serverInfo = ref({
  hospitalName: '某某医院',
  departmentName: '内科',
  address: '某某市某某区某某街道',
  phone: '010-12345678',
  patientName: '张三',
  visitDate: '2024-01-01',
  visitTime: '09:00'
})

// 注意事项
const noticeList = [
  '请携带有效身份证件',
  '请提前15分钟到达医院',
  '如需取消预约，请提前24小时操作',
  '就诊前请确保空腹'
]

// 就诊流程
const processList = [
  {
    title: '到院登记',
    desc: '前往医院导诊台出示预约信息进行登记'
  },
  {
    title: '候诊等待',
    desc: '按照叫号顺序在诊室外等候'
  },
  {
    title: '医生就诊',
    desc: '进入诊室后向医生详细描述症状'
  },
  {
    title: '取药/检查',
    desc: '根据医生建议前往相应科室进行检查或取药'
  }
]

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 拨打电话
const makeCall = () => {
  window.location.href = 'tel:' + serverInfo.value.phone
}

// 查看地图
const showMap = () => {
  showToast('查看地图功能开发中')
}

// 获取服务详情
const getServerDetail = async () => {
  const id = route.query.id
  // TODO: 调用获取服务详情接口
  console.log('获取服务详情:', id)
}

// 页面加载时获取服务详情
getServerDetail()
</script>

<style lang="scss" scoped>
.server {
  .status-card {
    padding: 24px 16px;
    margin-bottom: 12px;
    background: linear-gradient(to right, var(--primary-color), #14d38b);
    color: #fff;

    .status-info {
      display: flex;
      align-items: center;
      gap: 16px;

      .status-text {
        h3 {
          margin: 0 0 4px;
          font-size: 20px;
          font-weight: 500;
        }

        p {
          margin: 0;
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }
  }

  .info-card {
    margin-bottom: 12px;

    .card-title {
      padding: 0 16px;
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 500;
      color: var(--text-color);
    }

    .hospital-info {
      padding: 16px;
      margin: 0 16px;
      background: #fff;
      border-radius: 8px;

      .info-content {
        h4 {
          margin: 0 0 8px;
          font-size: 16px;
          color: var(--text-color);
        }

        p {
          margin: 0 0 8px;
          font-size: 14px;
          color: var(--text-color-secondary);

          &:last-child {
            margin-bottom: 0;
          }
        }

        .address {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }

      .info-actions {
        display: flex;
        gap: 12px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
      }
    }

    .notice-list {
      padding: 16px;
      margin: 0 16px;
      background: #fff;
      border-radius: 8px;

      .notice-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 14px;
        color: var(--text-color);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .process-list {
      padding: 16px;
      margin: 0 16px;
      background: #fff;
      border-radius: 8px;

      .process-item {
        display: flex;
        gap: 16px;
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .process-step {
          .step-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: var(--primary-color);
            color: #fff;
            border-radius: 50%;
            font-size: 14px;
          }
        }

        .process-content {
          flex: 1;

          h5 {
            margin: 0 0 4px;
            font-size: 16px;
            color: var(--text-color);
          }

          p {
            margin: 0;
            font-size: 14px;
            color: var(--text-color-secondary);
          }
        }
      }
    }
  }
}
</style> 